<template>
    <div class="modal fade showPosition" id="showPosition" tabindex="-1" role="dialog"
         aria-labelledby="showPosition" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="map" class="map"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                map: null,
            }
        },
        methods: {
            createMark(val) {   //调用此函数创建标记点
                this.map.clearOverlays();
                let src = val.online ? 'static/images/icon_1_online.png' : 'static/images/icon_1_offline.png';
                let pointArr = [];
                let point = new BMap.Point(val.lng, val.lat);
                let html = `
                    <p>设备IMEI号: ${val.imei}</p>
                    <p>最后在线时间: ${val.createTime}</p>
                `;
                let label = new BMap.Label(html, {offset: new BMap.Size(46, -10)}); // 创建标签
                label.setStyle({
                    color: '#344045',
                    border: 'none',
                    borderRight: '1px solid #344045',
                    fontSize: '12px',
                    height: '66px',
                    lineHeight: '10px',
                    fontFamily: '微软雅黑',
                    maxWidth: 'none',
                    padding: '16px',
                    paddingLeft: '25px',
                    background: 'transparent url(\'static/images/device_bg_big.png\') no-repeat'
                });
                pointArr.push(point);
                new BMap.Convertor().translate(pointArr, 1, 5, (res) => {
                    if (res.status === 0) {
                        val.lng = res.points[0].lng;
                        val.lat = res.points[0].lat;
                        let point = new BMap.Point(val.lng, val.lat);
                        let marker = new BMap.Marker(point, {
                            icon: new BMap.Icon(src, new BMap.Size(41, 48))
                        });
                        this.map.addOverlay(marker); // 将标记点加到地图
                        marker.setLabel(label); // 标记点增加label标签
                    }
                });
                let timer = setTimeout(() => {
                    this.map.panTo(new BMap.Point(val.lng, val.lat));
                    clearTimeout(timer);
                },1000)
            },
            createMap(val){
                this.map = new BMap.Map('map');    // 创建Map实例
                this.map.centerAndZoom(new BMap.Point(113.956033, 22.560118), 14)  // 初始化地图,设置中心点坐标和地图级别
                this.map.setCurrentCity('深圳');         // 设置地图显示的城市 此项是必须设置的
                this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                this.createMark(Object.assign({}, val))
            }
        },
    }
</script>

<style scoped>
    .showPosition .modal-content {
        width: 10rem;
        height: 6rem;
    }

    .map {
        width: 100%;
        height: 100%;
    }
</style>
